<template>
  <div v-loading="fullscreenLoading" class="app-container gw-home" style="box-shadow: none">
    <!-- 0左侧 -->
    <div class="home-part left-home-part">
      <div class="home-left">
        <!-- 一. 左侧的设备列表整体区域 -->
        <div class="panel-container source-list">
          <!-- <div class="panel-title panel-title-grey">设备列表</div> -->
          <!-- 1 播放树的搜索区域 -->
          <div class="device-tree-title">
            <div class="title" :style="switchList ? 'font-weight: 500' : ''" @click="equipmentList">设备列表</div>
            <div class="title" :style="!switchList ? 'font-weight: 500' : ''" @click="rotationList">轮播列表</div>
          </div>

          <!-- 2 存放播放树的 容器 -->
          <div v-show="switchList" class="tree-container">
            <!-- 设备树 -->
            <KeyRotationTree style="margin-bottom: 10px" class="addr-tree" ref="qnDeviceTree" :grid_len="grid_len"
              :grid_select="grid_select" @node-click="clickTree">
            </KeyRotationTree>
            <!-- 准备添加的轮播列表 -->
            <div v-if="rotationArr.length != 0">
              <span style="margin-left: 10px;font-size: 18px;">选择你的轮播规则</span>
              <!-- 列表 -->
              <el-tree style="margin-top: 10px" :data="rotationArr" :props="defaultProps">
                <div slot-scope="row">
                  {{row.data.name}}
                  <i class="el-icon-delete-solid" @click="trashCan(row)"></i>
                </div>
              </el-tree>
              <!-- 按钮 -->
              <div style="display: flex;justify-content: center;">
                <el-button class="fill-btn" @click="carouselAdd">添加</el-button>
                <el-button class="plain-btn" @click="rotationEmpty">清空</el-button>
              </div>
            </div>
          </div>
          <!-- 轮播列表 -->
          <div v-show="!switchList" class="tree-container">
            <el-select style="margin-left: 20px" v-model="rotationTime" placeholder="请选择轮播间隔时间">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-tree style="margin-top: 10px" :data="rotationRules" :props="defaultPropsRotation">
              <div style="width: 100%;" slot-scope="row">
                <div style="display: flex;justify-content: space-between;">
                  <div @click="clickRotate(row)">
                    <i :id="row.data.id" class="el-icon-video-camera-solid"></i>
                    {{row.data.name}}
                  </div>
                  <div style="margin-right: 10px;">
                    <i class="el-icon-delete-solid" @click="trashCanRotation(row)"></i>
                  </div>
                </div>
              </div>
            </el-tree>
            <div style="display: flex;justify-content: center;">
              <!-- 有数据时显示 -->
              <div v-show="startRotationDisplay">
                <el-button class="fill-btn" @click="startRotation">开始</el-button>
                <el-button class="fill-btn" @click="stopRotationButton">停止</el-button>
                <el-button class="plain-btn" @click="emptyRule">清空</el-button>
                <!-- <el-button class="plain-btn" @click="ceshi">测试</el-button> -->
              </div>
              <!-- 无数据时显示 -->
              <div v-show="!startRotationDisplay">
                <el-button class="fill-btn" @click="equipmentList">添加</el-button>
              </div>
            </div>
          </div>
          <!-- 3 播放树下边的 展开按钮 (是否展开全部播放树 ) -->
          <div class="coverPlatform" @click="coverPlatform=!coverPlatform">
            <i class="iconfont" :class="coverPlatform?'icontwo-up':'icontwo-down'"></i>
          </div>
        </div>
        <!-- 二. 左侧的云台控制区域 -->
        <!-- <div v-show="!coverPlatform" class="panel-container camera-platform">
          <div class="panel-title panel-title-grey">云台控制</div>
          <div class="camera-directive">
            <div v-show="rtmpSrc === '' || rtmpType !== 2" class="float-layer"></div>
            <div class="directive-container" :class="{'not-allowed': rtmpSrc === '' || rtmpType !== 2}">
              <p>
                <i class="iconfont icon-direction icon1 is-disabled" @click="changePtz('PTZ_EXTPTZ_LEFTTOP')"></i>
                <i class="iconfont icon-direction icon2" @click="changePtz('PTZ_UP_CONTROL')"></i>
                <i class="iconfont icon-direction icon3 is-disabled" @click="changePtz('PTZ_EXTPTZ_RIGHTTOP')"></i>
              </p>
              <p>
                <i class="iconfont icon-direction icon4" @click="changePtz('PTZ_LEFT_CONTROL')"></i>
                <i class="iconfont icon-reset icon5"></i>
                <i class="iconfont icon-direction icon6" @click="changePtz('PTZ_RIGHT_CONTROL')"></i>
              </p>
              <p>
                <i class="iconfont icon-direction icon7 is-disabled" @click="changePtz('PTZ_EXTPTZ_LEFTDOWN')"></i>
                <i class="iconfont icon-direction icon8" @click="changePtz('PTZ_DOWN_CONTROL')"></i>
                <i class="iconfont icon-direction icon9 is-disabled" @click="changePtz('PTZ_EXTPTZ_RIGHTDOWN')"></i>
              </p>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!-- 1右侧 -->
    <div class="home-part right-home-part">
      <!-- <tagsNav :routeList="routeList"></tagsNav> -->
      <div class="panel-container home-right">
        <div class="panel-title2">
          <span>监控视频</span>
          <div class="operator">
            <div class="workorder-btn">
              <!-- <div class="setup btn-item" @click="dialogFormVisible = true">+批量工单</div>
              <div class="screenshot btn-item">批量抓图</div>
              <div class="record btn-item">录制视频</div> -->
            </div>
            <el-tooltip effect="dark" content="网页全屏" placement="top">
              <i class="iconfont iconquanping" @click="webFS()"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="单个视频" placement="top">
              <i class="iconfont icon-quanping5" :class="{active: grid_len === 1}" @click="changeTab(1)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="四格视频" placement="top">
              <i class="iconfont icon-ic_mode_block" :class="{active: grid_len === 4}" @click="changeTab(4)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="九宫格视频" placement="top">
              <i class="iconfont icon-nine-squares" :class="{active: grid_len === 9}" @click="changeTab(9)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="十二格视频" placement="top">
              <i class="iconfont icon-jiugongge-line-" @click="changeTab(12,1,1)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="十六格视频" placement="top">
              <i class="iconfont icon-wanggeshitu" :class="{active: grid_len === 16}" @click="changeTab(16)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="二十四格视频" placement="top">
              <i class="iconfont icon-louceng" :class="{active: grid_len === 24}" @click="changeTab(24)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="二十五格视频" placement="top">
              <i class="iconfont icon-louceng" :class="{active: grid_len === 25}" @click="changeTab(25)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="监控区全屏" placement="top">
              <i class="iconfont icon-ico_quanping" ref="fullBtn" @click="changeFullScreen"></i>
            </el-tooltip>
          </div>
        </div>
        <!-- 播放器区域 -->
        <div class="panel-content">
          <div class="video-content" ref="videoArea" :class="'video-item-' + grid_len" v-if="tabActive12_3">
            <div v-for="i in grid_len" :key="i" class="video-item">
              <!-- 播放器 -->
              <PlayerBoxOL :stream_type="videoStream" :player_index="i-1" :is_active="(grid_select == i-1) && has_active"
                @handleitem="handleGrid(arguments)" :ref="'videoPlayer' + (i - 1)">
              </PlayerBoxOL>

            </div>
          </div>
          <div class="video-content" ref="videoArea" :class="'video-item-' + grid_len" v-if="tabActive12_2">
            <div v-for="i in grid_len" :key="i" class="video-item12_2">
              <!-- 播放器 -->
              <PlayerBoxOL :stream_type="videoStream" :player_index="i-1" :is_active="(grid_select == i-1) && has_active"
                @handleitem="handleGrid(arguments)" :ref="'videoPlayer' + (i - 1)">
              </PlayerBoxOL>
            </div>
          </div>
          <div class="video-content" ref="videoArea" :class="'video-item-' + grid_len" v-if="tabActive12_2_old">
            <div v-for="i in grid_len" :key="i" class="video-item12_2">
              <!-- 播放器 -->
              <PlayerBoxOL :stream_type="videoStream" :player_index="i-1" :is_active="(grid_select == i-1) && has_active"
                @handleitem="handleGrid(arguments)" :ref="'videoPlayer' + (i - 1)">
              </PlayerBoxOL>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2 批量的弹框 -->
    <el-dialog title="批量抓拍" :visible.sync="dialogFormVisible" width="60%" :close-on-click-modal="false" center>
      <div class="img-container" ref="img-container">
        <div :class="['img-item', grid_len_width]" v-for="(item,i) in grid_len" :key="i"> 图片{{i}} </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="plain-btn" @click="dialogFormVisible = false">取消</el-button>
        <el-button class="fill-btn">确认</el-button>
      </div>
    </el-dialog>
    <!-- 3 单个的弹框 -->

  </div>
</template>

<script>
  // import DeviceTree from '@/components/DeviceTree/index.vue'
  // import RTMPDeviceVideoPlayer from '@/components/DeviceVideoPlayer/index.vue'
  // import HLSDeviceVideoPlayer from '@/components/DeviceVideoPlayer/qnPlayer.vue'
  // import { playRtmpById, playRtmpByIdNew, finishRtmpById, ptzControl, getHeartBeat } from '@/api/home.js'
  // import { getVideoStreamType } from '@/api/setting.js'

  import {
    getVideourl,
    addRotationRules,
    selectRotationRules,
    deleteRotationRules,
    selectRotationStream
  } from '@/api/video.js'
  import {
    listEvaluate
  } from '@/api/workorder.js'
  import {
    listUser
  } from '@/api/permission.js'

  import tagsNav from '@/components/Header/tagsNav'
  import 'jquery.nicescroll'
  import KeyRotationTree from '@/components/Address/KeyRotationTree'

  import PlayerBoxOL from '@/components/DeviceVideoPlayer/PlayerBoxOL'

  // 退出全屏
  var exitWebFS = (that) => {
    return function(e) {
      if (e.key === 'Escape' && !e.repeat) {
        if (document.body.classList.contains('web-fullscreen-fix')) {
          document.body.classList.remove('web-fullscreen-fix')
          if (that.videoStream === 'HLS') return
          that.getHW()
        }
      }
    }
  }

  export default {
    components: {
      PlayerBoxOL,
      KeyRotationTree,
      tagsNav
    },
    data() {
      return {
        // 轮播规则表
        rotationRules: [],
        videoPlayTimer: null,
        has_active: false,
        grid_select: -1,
        grid_len: 1,

        cameraIds: [],
        // 保存当前活跃宫格中 播放器的播放参数-----------------------
        rtmpSrc: '', // 操作云台的地址
        rtmpType: '', // 设备类型  目前只球机可以控云台
        // deviceIndex: -1, // 播放的设备是第几个
        deviceId: '',
        gatewayId: '',
        channelNum: '',
        //----------------------------------------
        playerWidth: '',
        playerHeight: '',
        videoStream: 'HLS',
        videoStreamId: '',
        routeList: [],
        coverPlatform: false,
        filterText: '',
        tabActive12_2: false,
        tabActive12_3: true,
        tabActive12_2_old: false,
        ipcArrs: {},

        dialogFormVisible: false,
        role_list: [], // 按钮权限
        switchList: true,
        rotationArr: [],
        defaultProps: {
          label: 'name'
        },
        defaultPropsRotation: {
          label: 'name'
        },
        batchDeleteRule: [],
        // 加载条
        fullscreenLoading: false,
        // 是否显示开始轮播按钮
        startRotationDisplay: false,
        rotationStreamArr: [],
        // 尝试缓存数组放在外面
        sequence: [],
        segmentedSequence: [],
        // 用于停止轮播
        stopRotation: false,
        timer1: null,
        timer2: null,
        timer1Arr: [],
        timer2Arr: [],
        // 轮播时间
        rotationTime: '2000',
        options: [
          {
            value: '2000',
            label: '测试时间2秒'
          },
          {
            value: '5000',
            label: '测试时间5秒'
          },
          {
            value: '60000',
            label: '一分钟'
          },
          {
            value: '120000',
            label: '二分钟'
          },
          {
            value: '180000',
            label: '三分钟'
          },
        ],
        highlightLast: false,
        highlightArr: [],
        PlayingArr: []
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player;
      },
      grid_len_width() {
        if (this.grid_len == 1) return 'w99'
        else if (this.grid_len == 4) return 'w49'
        else if (this.grid_len == 9) return 'w32'
        else if (this.grid_len == 12) return 'w24'
        else if (this.grid_len == 16) return 'w24'
        else if (this.grid_len == 24) return 'w16'
        else if (this.grid_len == 25) return 'w19'
      }
    },
    mounted() {
      let menuList = JSON.parse(localStorage.getItem('menuList'))
      if (menuList && menuList.length) {
        menuList.map(item => {
          if (item.id === '805') {
            this.routeList = JSON.parse(JSON.stringify(item.children))
          }
        })
        for (let item of this.routeList) {
          item.path = '/' + item.pathName
        }
      }
      window.onresize = () => {
        if (this.videoStream === 'HLS') return
        this.getHW()
      }
      // this.getVideoStreamType() // 获取码流类型
      document.addEventListener('keydown', exitWebFS(this))

      // 下拉回显--------------------------
      listEvaluate().then(res => {
        this.list_workorder = res.data
        this.$store.dispatch('workorder/getWorkorderType', res.data)
      })
      listUser().then(res => {
        this.list_user = res.data
        this.$store.dispatch('workorder/getListUser', res.data)
      })

      this.role_list = this.$store.getters.menu_code_list
    },
    beforeDestroy() {
      window.onresize = null
      document.removeEventListener('keydown', exitWebFS(this))

      window.clearInterval(this.videoPlayTimer);
    },
    watch: {
      playerWidth() {
        this.rotate()
      },
      playerHeight() {
        if (this.tabActive12_2 == true) {
          this.rotate2()
        } else if (this.tabActive12_2_old == true) {
          this.rotate()
        } else {
          this.rotate()
        }
      },
      // 监视是否最后一次循环
      stopRotation(newValue, oldValue) {
        if (newValue == true) {
          this.stopRotation = false
          this.timer2 = setTimeout(() => {
            this.timer1Arr.forEach(element => {
              clearInterval(element)
            })
            this.timer2Arr.forEach(element => {
              clearInterval(element)
            })
            this.sequence = []
            this.segmentedSequence = []
            this.rotationCore()
          }, this.rotationTime)
          this.timer2Arr.push(this.timer2)
        }
      },
      // 改变轮播间隔
      rotationTime() {
        if (this.rotationStreamArr.length == 0) {
          
        } else {
          // 高亮取消
          this.rotationRules.forEach(element => {
            var highlightEmpty = document.getElementById(element.id)
            highlightEmpty.style = ""
          })
          this.timer1Arr.forEach(element => {
            clearInterval(element)
          })
          this.timer2Arr.forEach(element => {
            clearInterval(element)
          })
          this.sequence = []
          this.segmentedSequence = []
          this.rotationCore()
        }
      },
      // 监听轮播列表，不是第一次改变就自动获取规则
      rotationRules(newValue, oldValue) {
        // console.log('前-数据1 :>> ', oldValue)
        // console.log('前-数据2 :>> ', this.rotationStreamArr)
        // console.log('前-数据3 :>> ', this.rotationRules)

        if (oldValue.length != 0 && this.rotationStreamArr.length != 0 && this.rotationRules.length != 0) {
          console.log('需要调用 :>> ')
          this.startRotation()
        } else {
          console.log('无需调用 :>> ')
        }

        // console.log('后-数据1 :>> ', oldValue)
        // console.log('后-数据2 :>> ', this.rotationStreamArr)
        // console.log('后-数据3 :>> ', this.rotationRules)
      }
    },
    created() {
      this.getRotationRules()
    },
    methods: {
      ceshi() {
        console.log('执行了测试方法 :>> ', this.highlightArr  )

      },
      clickRotate(row) {
        // console.log('当前的宫格选中情况 :>> ', this.grid_select) // -1没选中，其他数字为当前选中的宫格
        // console.log('能传链接过来吗 :>> ', row)
        // console.log('能找到对应的连接吗 :>> ', this.rotationStreamArr)
        // console.log('这个是什么 :>> ', this.rotationRules);
        // console.log('高亮摄像头的id :>> ', row.data.id);

        this.highlightArr = []

        if (this.rotationStreamArr.length == 0) {
          this.$notify({
            message: '请先点击开始获取轮播链接',
            type: 'warning',
            duration: 4000
          })
        } else if (this.grid_select == -1) {
          for (let index = 0; index < this.rotationStreamArr.length; index++) {
            if (this.rotationStreamArr[index].channelId == row.data.channelId) {
              // console.log('对应下标的连接 :>> ', this.rotationStreamArr[index].liveStreamVo.payloads[1].url)
              // 暂停轮播
              this.timer1Arr.forEach(element => {
                clearInterval(element)
              })
              this.timer2Arr.forEach(element => {
                clearInterval(element)
              })
              this.sequence = []
              this.segmentedSequence = []
              // 根据下标来播放指定的播放器
              for (let i = 0; i < this.grid_len; i++) {
                if (i == 0) {
                  // 高亮取消
                  this.rotationRules.forEach(element => {
                    var highlightEmpty = document.getElementById(element.id)
                    highlightEmpty.style = ""
                  })
                  var highlight = document.getElementById(row.data.id)
                  highlight.style = "color: #1890FF"
                  this.highlightArr.push(row.data.id)

                  this.$refs['videoPlayer' + 0][0].videoSrc = this.rotationStreamArr[index].liveStreamVo.payloads[1].url
                  this.$refs['videoPlayer' + 0][0].device_id = this.rotationStreamArr[index].deviceId
                  this.$refs['videoPlayer' + 0][0].channel_id = this.rotationStreamArr[index].channelId 
                } else {
                  this.$refs['videoPlayer' + i][0].videoSrc = ''
                  this.$refs['videoPlayer' + i][0].device_id = ''
                  this.$refs['videoPlayer' + i][0].channel_id = ''
                }
              }
              break
            }
          }
        } else {
          for (let index = 0; index < this.rotationStreamArr.length; index++) {
            if (this.rotationStreamArr[index].channelId == row.data.channelId) {
              // console.log('对应下标的连接 :>> ', this.rotationStreamArr[index].liveStreamVo.payloads[1].url)
              // 暂停轮播
              this.timer1Arr.forEach(element => {
                clearInterval(element)
              })
              this.timer2Arr.forEach(element => {
                clearInterval(element)
              })
              this.sequence = []
              this.segmentedSequence = []
              // 根据下标来播放指定的播放器
              for (let i = 0; i < this.grid_len; i++) {
                if (i == this.grid_select) {
                  // 高亮取消
                  this.rotationRules.forEach(element => {
                    var highlightEmpty = document.getElementById(element.id)
                    highlightEmpty.style = ""
                  })
                  var highlight = document.getElementById(row.data.id)
                  highlight.style = "color: #1890FF"
                  this.highlightArr.push(row.data.id)

                  this.$refs['videoPlayer' + i][0].videoSrc = this.rotationStreamArr[index].liveStreamVo.payloads[1].url
                  this.$refs['videoPlayer' + i][0].device_id = this.rotationStreamArr[index].deviceId
                  this.$refs['videoPlayer' + i][0].channel_id = this.rotationStreamArr[index].channelId 
                } else {
                  this.$refs['videoPlayer' + i][0].videoSrc = ''
                  this.$refs['videoPlayer' + i][0].device_id = ''
                  this.$refs['videoPlayer' + i][0].channel_id = ''
                }
              }
              this.firstPause = false
              break
            }
          }
        }

      },
      // 解决切回一宫格时的问题
      changeGridSelect() {
        // console.log('调用了吧 :>> ')
        this.grid_select = -1
      },
      // 轮播核心 --- 可以使用setInterval，这样更稳定但是不好实现中断的效果
      rotationCore() {
        this.$nextTick(() => {
        console.log('开始执行轮播 :>> ')

        for (let index = 0; index < this.rotationStreamArr.length; index++) {
          this.sequence.push(index)
        }
        this.segmentedSequence = this.group(this.sequence, this.grid_len)

        if (this.rotationStreamArr.length < this.grid_len) {
          // console.log('小于 :>> ')
            for (let index = 0; index < this.rotationStreamArr.length; index++) {
              if (index < this.rotationStreamArr.length) {
                console.log('下标 :>> ', index)
                
                // 给摄像头高亮
                var highlight2 = document.getElementById(this.rotationRules[index].id)
                highlight2.style = "color: #1890FF"
                this.highlightArr.push(this.rotationRules[index].id)

                this.$refs['videoPlayer' + index][0].videoSrc = this.rotationStreamArr[index].liveStreamVo.payloads[1].url
                this.$refs['videoPlayer' + index][0].device_id = this.rotationStreamArr[index].deviceId
                this.$refs['videoPlayer' + index][0].channel_id = this.rotationStreamArr[index].channelId
              }
            }
        } else if (this.rotationStreamArr.length == this.grid_len) {
          // console.log('等于 :>> ')
          for (let index = 0; index < this.rotationStreamArr.length; index++) {
            console.log('下标 :>> ', index)

            // 给摄像头高亮
            var highlight2 = document.getElementById(this.rotationRules[index].id)
            highlight2.style = "color: #1890FF"
            this.highlightArr.push(this.rotationRules[index].id)

            this.$refs['videoPlayer' + index][0].videoSrc = this.rotationStreamArr[index].liveStreamVo.payloads[1].url
            this.$refs['videoPlayer' + index][0].device_id = this.rotationStreamArr[index].deviceId
            this.$refs['videoPlayer' + index][0].channel_id = this.rotationStreamArr[index].channelId
          }
        } else if (this.rotationStreamArr.length > this.grid_len) {
          // console.log('大于 :>> ')
          for (let index1 = 0; index1 < this.segmentedSequence.length; index1++) {
            if (index1 == 0) {
              // 第一次不延迟
              // 清空上一次的高亮
              if (this.highlightLast) {
                this.highlightArr.forEach(element => {
                  var highlightEmpty = document.getElementById(element)
                  highlightEmpty.style = ""
                })
                this.highlightArr = []
              }
              for (let index2 = 0; index2 < this.grid_len; index2++) {
                console.log('下标 :>> ', this.segmentedSequence[index1][index2])
                
                this.$refs['videoPlayer' + index2][0].videoSrc = this.rotationStreamArr[this.segmentedSequence[index1][
                  index2
                ]].liveStreamVo.payloads[1].url
                this.$refs['videoPlayer' + index2][0].device_id = this.rotationStreamArr[this.segmentedSequence[index1][
                  index2
                ]].deviceId
                this.$refs['videoPlayer' + index2][0].channel_id = this.rotationStreamArr[this.segmentedSequence[index1][
                  index2
                ]].channelId

                // 给摄像头高亮
                var highlight = document.getElementById(this.rotationRules[this.segmentedSequence[index1][index2]].id)
                highlight.style = "color: #1890FF"
                this.highlightArr.push(this.rotationRules[this.segmentedSequence[index1][index2]].id)
              }
            } else {
              // 第二次开始延迟
              this.timer1 = setTimeout(() => {
                if (index1 == this.segmentedSequence.length - 1) {
                  // 最后一次轮播

                  // 用于循环,告诉监控器当前为最后一次循环
                  this.stopRotation = true
                  
                  // 清空上一次的高亮
                  this.highlightArr.forEach(element => {
                    var highlightEmpty = document.getElementById(element)
                    highlightEmpty.style = ""
                  })
                  this.highlightArr = []

                  // 告诉高亮当前为最后一轮
                  this.highlightLast = true
                  for (let index2 = 0; index2 < this.grid_len; index2++) {
                    console.log('最后一次下标 :>> ', this.segmentedSequence[index1][index2])

                    if (index2 < this.segmentedSequence[index1].length) {
                      // 正常赋值
                      this.$refs['videoPlayer' + index2][0].videoSrc = this.rotationStreamArr[this.segmentedSequence[
                        index1][index2]].liveStreamVo.payloads[1].url
                      this.$refs['videoPlayer' + index2][0].device_id = this.rotationStreamArr[this.segmentedSequence[
                        index1][index2]].deviceId
                      this.$refs['videoPlayer' + index2][0].channel_id = this.rotationStreamArr[this.segmentedSequence[
                        index1][index2]].channelId

                      // 给摄像头高亮 
                      var highlight = document.getElementById(this.rotationRules[this.segmentedSequence[index1][index2]].id)
                      highlight.style = "color: #1890FF"
                      this.highlightArr.push(this.rotationRules[this.segmentedSequence[index1][index2]].id)
                    } else {
                      // 超出赋空
                      console.log('执行超出赋空了吗 :>> ')
                      this.$refs['videoPlayer' + index2][0].videoSrc = ''
                      this.$refs['videoPlayer' + index2][0].device_id = ''
                      this.$refs['videoPlayer' + index2][0].channel_id = ''
                    }
                  }
                } else {
                  // 清空上一次的高亮
                  this.highlightArr.forEach(element => {
                    var highlightEmpty = document.getElementById(element)
                    highlightEmpty.style = ""
                  })
                  this.highlightArr = []
                  
                  for (let index2 = 0; index2 < this.grid_len; index2++) {
                    console.log('下标 :>> ', this.segmentedSequence[index1][index2])

                    this.$refs['videoPlayer' + index2][0].videoSrc = this.rotationStreamArr[this.segmentedSequence[
                      index1][index2]].liveStreamVo.payloads[1].url
                    this.$refs['videoPlayer' + index2][0].device_id = this.rotationStreamArr[this.segmentedSequence[
                      index1][index2]].deviceId
                    this.$refs['videoPlayer' + index2][0].channel_id = this.rotationStreamArr[this.segmentedSequence[
                      index1][index2]].channelId

                    // 给摄像头高亮
                    var highlight = document.getElementById(this.rotationRules[this.segmentedSequence[index1][index2]].id)
                    highlight.style = "color: #1890FF"
                    this.highlightArr.push(this.rotationRules[this.segmentedSequence[index1][index2]].id)
                  }
                }
              }, index1 * this.rotationTime)
              this.timer1Arr.push(this.timer1)
            }
          }
        }
        })
      },
      // 暂停轮播
      stopRotationButton() {
        this.timer1Arr.forEach(element => {
          clearInterval(element)
        })
        this.timer2Arr.forEach(element => {
          clearInterval(element)
        })
        this.sequence = []
        this.segmentedSequence = []
      },
      // 数组分段
      group(array, subGroupLength) {
        let index = 0;
        let newArray = [];
        while (index < array.length) {
          newArray.push(array.slice(index, index += subGroupLength));
        }
        return newArray;
      },
      // 开始轮播
      startRotation() {
        console.log('再次获取轮播列表了吗 :>> ')
        // 高亮取消
        this.highlightArr.forEach(element => {
          var highlightEmpty = document.getElementById(element)
          highlightEmpty.style = ""
        })
        this.highlightArr = []

        // 打开加载条
        this.fullscreenLoading = true
        // 请求
        selectRotationStream()
          .then(res => {
            // 关闭加载条
            this.fullscreenLoading = false

            // 赋值轮播数组，不赋值不能用rotationCore()
            this.rotationStreamArr = res.data

            // console.log('轮播数组 :>> ', this.rotationStreamArr)

            // 打开轮播
            this.timer1Arr.forEach(element => {
              clearInterval(element)
            })
            this.timer2Arr.forEach(element => {
              clearInterval(element)
            })
            this.sequence = []
            this.segmentedSequence = []
            
            this.rotationCore()

          })
          .catch(err => {
            this.$message.error(err)
          })

      },
      // 批量清空规则
      emptyRule() {
        deleteRotationRules(
            this.batchDeleteRule
          )
          .then(res => {
            this.$notify({
              message: '批量删除成功',
              type: 'success',
              duration: 4000
            })
            this.getRotationRules()
            // 批量删除后停止一切轮播规则
            this.timer1Arr.forEach(element => {
              clearInterval(element)
            })
            this.timer2Arr.forEach(element => {
              clearInterval(element)
            })
            this.sequence = []
            this.segmentedSequence = []

            // 防止原先有列表的情况清空下清空再加入会自动轮播
            this.rotationStreamArr = []
            this.rotationRules = []

            // 关闭所有的视频窗口
            for (let index = 0; index < this.grid_len; index++) {
              this.$refs['videoPlayer' + index][0].videoSrc = ''
              this.$refs['videoPlayer' + index][0].device_id = ''
              this.$refs['videoPlayer' + index][0].channel_id = ''
            }

          })
          .catch(err => {
            this.$message.error(err.message)
          })
      },
      // 查询轮播规则
      getRotationRules() {
        selectRotationRules()
          .then(res => {
            if (res.data.list != null) {
              // 改变轮播列表，监听了
              this.rotationRules = res.data.list
              res.data.list.forEach(element => {
                this.batchDeleteRule.push(element.id)
              })
              this.startRotationDisplay = true

              // 清空高亮相关的，不需要清空高亮，列表渲染会自动清除
              this.highlightLast = false
              this.highlightArr = []

            } else {
              this.rotationRules = []
              this.rotationStreamArr = []
              this.startRotationDisplay = false
            }
          })
          .catch(err => {
            this.$message.error(err.message)
          })
      },
      // 轮播添加
      carouselAdd() {
        let Rdata = []
        this.rotationArr.forEach(element => {
          Rdata.push({
            name: element.name,
            deviceId: element.deviceId,
            channelId: element.channelId
          })
        })

        addRotationRules(Rdata)
          .then(res => {
            this.$notify({
              message: '添加成功',
              type: 'success',
              duration: 4000
            })
            this.getRotationRules()
            this.rotationEmpty()
          })
          .catch(err => {
            this.$message.error(err.message)
          })
      },
      // 轮播清空
      rotationEmpty() {
        this.rotationArr.forEach(element => {
          element.row.data.collect_inline = false
        })
        this.rotationArr = []
      },
      // 轮播删除, 这个才是轮播列表的单个删除
      trashCanRotation(row) {
        deleteRotationRules(row.data.id)
          .then(res => {
            this.$notify({
              message: '删除成功',
              type: 'success',
              duration: 4000  
            })

            this.getRotationRules()
          })
          .catch(err => {
            this.$message.error(err.message)
          })
      },
      // 点击垃圾桶，不是轮播列表的那个
      trashCan(row) {
        this.rotationArr.forEach((element, i) => {
          if (element.channelId == row.data.channelId) {
            this.rotationArr.splice(i, 1)
            element.row.data.collect_inline = false
          }
        })
      },
      // 收藏
      favoriteList(data, id, row) {
        if (data.collect_inline == true) {
          this.rotationArr.push({
            deviceId: id,
            channelId: data.id,
            name: data.name,
            row: row
          })
        } else {
          this.rotationArr.forEach((element, i) => {
            if (element.channelId == data.id) {
              this.rotationArr.splice(i)
            }
          })
        }

      },
      // 设备列表
      equipmentList() {
        this.switchList = true
        // this.rotationEmpty()
      },
      // 轮播列表
      rotationList() {
        this.switchList = false
        // this.rotationEmpty()
      },
      // 网页全屏
      webFS() {
        document.body.classList.add('web-fullscreen-fix')
        if (this.videoStream === 'HLS') return
        this.$nextTick(() => {
          this.getHW()
        })
      },
      // 左侧播放树 搜索框:确认搜索
      searchTree() {
        this.$refs.qnDeviceTree.searchTree(this.filterText)
      },
      // 视频缩放调整
      getHW() {
        if (this.tabActive12_2 == true || this.tabActive12_2_old == true) {
          this.playerWidth = $('.video-item12_2').width()
          this.playerHeight = $('.video-item12_2').height()
        } else {
          this.playerWidth = $('.video-item').width()
          this.playerHeight = $('.video-item').height()
        }

        // this.rotate()
      },
      rotate() {
        let h = $('.video-scale .video-js').innerHeight()
        let seita = this.playerHeight / h
        let deg = parseFloat((Math.acos(seita) * 180 / (Math.PI)).toFixed(2))
        let top = (this.playerHeight - h) / 2
        $('.video-js').css('transform', `rotateX(${deg}deg)`)
        $('.video-js').css('top', `${top}px`)

      },
      rotate2() {
        let h = $('.video-scale .video-js').innerHeight()
        let seita = this.playerHeight / h
        let deg = parseFloat((Math.acos(seita) * 180 / (Math.PI)).toFixed(2))
        let top = (this.playerHeight - h) / 2
        if (window.innerHeight > 1200) {
          $('.video-js').css('transform', `scaleY(2.4)`)
        } else if (window.innerHeight >= 1100 && window.innerHeight <= 1200) {
          $('.video-js').css('transform', `scaleY(2.25)`)
        } else if (window.innerHeight > 1080 && window.innerHeight < 1100) {
          $('.video-js').css('transform', `scaleY(2.15)`)
        } else if (window.innerHeight >= 1050 && window.innerHeight <= 1080) {
          $('.video-js').css('transform', `scaleY(2.1)`)
        } else if (window.innerHeight >= 1000 && window.innerHeight < 1050) {
          $('.video-js').css('transform', `scaleY(2.05)`)
        } else if (window.innerHeight >= 950 && window.innerHeight < 1000) {
          $('.video-js').css('transform', `scaleY(1.9)`)
        } else if (window.innerHeight >= 850 && window.innerHeight < 900) {
          $('.video-js').css('transform', `scaleY(1.8)`)
        } else if (window.innerHeight >= 750 && window.innerHeight < 800) {
          $('.video-js').css('transform', `scaleY(1.7)`)
        } else if (window.innerHeight >= 725 && window.innerHeight < 750) {
          $('.video-js').css('transform', `scaleY(1.6)`)
        } else if (window.innerHeight >= 700 && window.innerHeight < 725) {
          $('.video-js').css('transform', `scaleY(1.5)`)
        } else if (window.innerHeight >= 650 && window.innerHeight < 700) {
          $('.video-js').css('transform', `scaleY(1.4)`)
        } else if (window.innerHeight > 625 && window.innerHeight < 650) {
          $('.video-js').css('transform', `scaleY(1.3)`)
        } else if (window.innerHeight > 600 && window.innerHeight < 625) {
          $('.video-js').css('transform', `scaleY(1.2)`)
        } else if (window.innerHeight <= 600) {
          $('.video-js').css('transform', `rotateX(${deg}deg)`)
          $('.video-js').css('top', `${top}px`)
        }
      },

      // 获取码流类型
      getVideoStreamType() {
        getVideoStreamType().then(res => {
          if (res.data.code === 0) {
            window.localStorage.setItem('videoStreamType', res.data.data.stream_type)
            if (!res.data.data) return
            // console.log(res.data.data.stream_type);
            this.videoStream = res.data.data.stream_type ? res.data.data.stream_type : 'HLS'
            this.videoStreamId = res.data.data.id
          }
        }).catch(err => {
          this.videoStream = 'HLS'
        })
      },
      // 切换全屏
      changeFullScreen() {
        const el = this.$refs.videoArea
        const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el
          .msRequestFullScreen
        if (typeof rfs !== 'undefined' && rfs) {
          rfs.call(el)
          return
        }
        if (typeof window.ActiveXObject !== 'undefined') {
          const wscript = new ActiveXObject('WScript.Shell')
          if (wscript) {
            wscript.SendKeys('{F11}')
          }
        }
      },

      // 宫格数量: 被切换
      changeTab(tab, value, way) {
        if (this.grid_len == tab) {
          
        } else {
        this.rtmpSrc = ''
        this.deviceId = ''
        this.rtmpType = ''
        this.gatewayId = ''
        this.channelNum = ''

        this.has_active = false
        // this.grid_select = -1

        this.$nextTick(() => {
          this.grid_select = -1
          if (tab === 1) {
            this.grid_select = 0
          } else if (tab === 12 && way == 3) {
            this.tabActive12_2 = false
            this.tabActive12_3 = false
            this.tabActive12_2_old = true
          } else if (tab === 12 && way == 2) {
            this.tabActive12_2 = true
            this.tabActive12_3 = false
            this.tabActive12_2_old = false
          } else {
            this.tabActive12_2 = false
            this.tabActive12_3 = true
            this.tabActive12_2_old = false
          }
          this.grid_len = tab

          this.sequence = []
          this.segmentedSequence = []

          // 切换宫格改变轮播规则
          if (this.rotationStreamArr.length == 0) {
          } else {
            // this.sequence = []
            // this.segmentedSequence = []
            // clearInterval(this.timer1)
            // clearInterval(this.timer2)
            // this.timer1 = null
            // this.timer2 = null
            // this.stopRotation = true
            this.timer1Arr.forEach(element => {
              clearInterval(element)
            })
            this.timer2Arr.forEach(element => {
              clearInterval(element)
            })
            this.sequence = []
            this.segmentedSequence = []

            //清空高亮相关的，不需要清空高亮，列表渲染会自动清除
            this.rotationRules.forEach(element => {
              var highlightEmpty = document.getElementById(element.id)
              highlightEmpty.style = ""
            })
            this.highlightLast = false
            this.highlightArr = []

            this.rotationCore()
          }
        })
        }
      },
      heartBeat() { // 每个一段时间执行一次 心跳接口
        window.clearInterval(this.videoPlayTimer);
        this.videoPlayTimer = window.setInterval(() => {
          getHeartBeat();
        }, 180000);
      },

      // 播放树: 某一项被点击, 开始播放视频
      clickTree(data, checked, position, node) {
        if (checked) {
          //将点击的视频设备信息放本地存储 (日后优化: 可以使用父子组件传值的方式解决来解决此问题-----子组件PlayerBox)
          var ipcArrs = this.ipcArrs;
          ipcArrs["pos_" + position] = {
            data,
            checked,
            position
          }
          this.ipcArrs = ipcArrs;
          sessionStorage.setItem("ipcArrs", JSON.stringify(ipcArrs));

          //end将点击的视频设备信息放本地存储
          getVideourl({
              deviceId: node.parent.data.id,
              channelId: data.id
            })
            .then(res => {
              if (res.code == 0) { // code=0 打开视频成功
                if (res.status == -4) {
                  this.$message({
                    message: "当前设备不支持WEBRTC格式, 去【系统设置】进行更改!",
                    type: "warning",
                    duration: 5000
                  })
                  return
                }
                let tmpurl = res.data.payloads[1].url || ''
                let start = tmpurl.indexOf('#')
                if (start !== -1) tmpurl = tmpurl.substring(0, start)

                // 原先直接用下面这个方法打开链接，现在用一个中间方法来先收藏再通过轮播来打开
                // this.getChildVal(position, checked, this, 0, tmpurl, data, node)

                // this.heartBeat();   // 心跳
              } else { // code!=0 打开失败
                this.$message.error('请求失败')
                // this.getChildVal(position, !checked, this, -1)
              }
            })
            .catch((err) => {
              // this.$message.error(err.message)
              this.$message.error('视频打开失败!')
            })
        } else { // 关闭视频
          let ipcArrs = JSON.parse(sessionStorage.getItem("ipcArrs"))
          ipcArrs["pos_" + position].checked = false
          sessionStorage.setItem("ipcArrs", JSON.stringify(ipcArrs));
          this.getChildVal(position, checked, this, 1)
        }

        const resArr = []
        const checkArr = this.$refs.qnDeviceTree.checkedNodes
        for (let i = 0; i < checkArr.length; i++) {
          if (checkArr[i]) {
            resArr.push(checkArr[i].id)
          }
        }
        this.cameraIds = [...resArr] // 存储正在播放视频的id

      },
      // 通过ref,拿到子组件. 操作子组件
      getChildVal(position, checked, that, empty, tmpurl = '', data = {}, node = {}) {
        // 各参数: (位置, 打开视频?,this, 清空, url, data)
        if (empty == 1) { // 清空子组件 如下属性值
          that.$refs['videoPlayer' + position][0].videoSrc = ''
          that.$refs['videoPlayer' + position][0].device_id = ''
          that.$refs['videoPlayer' + position][0].channel_id = ''
          that.$refs['videoPlayer' + position][0].branchinfo = {}
          // that.$refs['videoPlayer' + position][0].videoId = ''
          // that.$refs['videoPlayer' + position][0].videoTitle = ''
          // that.$refs['videoPlayer' + position][0].videoType = ''
          // that.$refs['videoPlayer' + position][0].gatewayId = ''
          // that.$refs['videoPlayer' + position][0].channelNum = ''
        } else if (empty == 0) {
          that.$refs['videoPlayer' + position][0].videoSrc = tmpurl
          that.$refs['videoPlayer' + position][0].device_id = node.parent.data.id
          that.$refs['videoPlayer' + position][0].channel_id = data.id
          that.$refs['videoPlayer' + position][0].branchinfo = data.branchinfo
          // that.$refs['videoPlayer' + position][0].videoId = data.deviceIndex
          // that.$refs['videoPlayer' + position][0].videoTitle = data.name
          // that.$refs['videoPlayer' + position][0].videoType = data.type
          // that.$refs['videoPlayer' + position][0].gatewayId = data.deviceID
          // that.$refs['videoPlayer' + position][0].channelNum = data.number
        }
        that.$nextTick(() => {
          if (that.has_active && that.grid_select == position) { // (1)有处于活跃的宫格
            if (checked) { // 打开活跃宫格的视频,或者切换活跃宫格:  保存处于活跃的视频播放参数
              let child_ele = that.$refs['videoPlayer' + position][0]
              that.rtmpSrc = child_ele.videoSrc
              that.device_id = child_ele.device_id
              that.channel_id = child_ele.channel_id
              that.branchinfo = child_ele.branchinfo
              // that.deviceId = child_ele.videoId
              // that.rtmpType = child_ele.videoType
              // that.gatewayId = child_ele.gatewayId
              // that.channelNum = child_ele.channelNum
            } else { // 关闭活跃宫格的视频
              that.rtmpSrc = ''
              that.device_id = ''
              that.channel_id = ''
              that.branchinfo = {}
              // that.deviceId = ''
              // that.rtmpType = ''
              // that.gatewayId = ''
              // that.channelNum = ''
            }
          } else { // (2)无活跃的宫格
            that.rtmpSrc = ''
            that.device_id = ''
            that.channel_id = ''
            that.branchinfo = {}
            // this.deviceId = ''
            // this.rtmpType = ''
            // this.gatewayId = ''
            // this.channelNum = ''
          }

          // if(checked) getHeartBeat()   // 无论是否有活跃的宫格, 打开视频都要 调用此函数
        })

      },
      // 宫格: 某一项被点击
      handleGrid(argu) {
        // console.log('宫格数能被传递吗 :>> ', argu)
        let position = argu[0]
        let is_active = argu[1]

        if (!this.has_active && !is_active) { // 没有被选中的宫格, 则让当前被点击的宫格处于活跃
          this.has_active = true
          this.grid_select = position
        } else if (this.has_active && is_active) { // 有被选中的宫格, 活跃的再次接受点击,则取消活跃
          this.has_active = false
          this.grid_select = -1
        } else if (this.has_active && !is_active) { // 有被选中的宫格, 非活跃的被点击,则切换活跃宫格
          this.has_active = true
          this.grid_select = position
        }
        this.getChildVal(position, !is_active, this, -1)
        // this.$refs.qnDeviceTree.changePosition(this.grid_select)
      },

      // 云台控制
      changePtz(command) {
        ptzControl({
          deviceIndex: this.deviceId,
          ptzCommand: command,
          speed: 0,
          gatewayIndex: this.gatewayId,
          channelNum: this.channelNum
        }).then((res) => {
          if (res.data.code !== 0) {
            this.$message.error(res.data.msg)
          }
        }).catch((err) => {
          // this.$message.error(err.message)
        })
      },

    }
  }
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  .el-dialog {
    .el-dialog__header {
      background-color: #f5f7f5 !important;
    }
  }

  // 修改tree点击和移至样式
  // .el-tree-node__content {
  //   &:hover {
  //     background: #89c2f7;
  //   }
  // }
  // .el-tree-node:focus>.el-tree-node__content{
  //   background-color: #1890FF;
  // }
</style>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .device-tree-title {
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F8F8F8;
    padding: 0 10px;

    .title {
      font-size: 18px;
      color: #333;
    }

    .title:hover {
      cursor: pointer;
    }

    .tree-search {
      /*margin-bottom: 10px;*/
      // flex: 0 0 40px;
      // margin-left: 15px;
      // width: calc(100% - 30px);
      width: 60%;

      .el-input__suffix {
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 0px 4px 4px 0px;
        border: 1px solid #DCDFE6;
        top: 0px;
        right: 0px;
        box-sizing: border-box;
      }

      .search-icon {
        color: #aaa;
        cursor: pointer;
        font-size: 16px;
        // font-weight: bold;
        height: 32px;
      }
    }
  }

  .gw-home {
    // background-color: aqua;
    height: 100%;
    display: flex;

    .home-part {
      height: 100%;

      .panel-container {
        background: #fff;
        overflow: hidden;

        .panel-title {
          position: relative;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 60px;
          color: #333;
          padding-left: 30px;
        }

        .panel-title2 {
          // background-color: #cfd;
          background-color: #F9F9F9;
          position: relative;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 60px;
          color: #333;
          padding-left: 30px;
          display: flex;
          justify-content: space-between;
        }

        .panel-title-grey {
          background: #F8F8F8;
        }
      }

      .home-left {
        display: flex;
        flex-direction: column;
        height: 100%;

        .source-list {
          height: 100%;
          // min-height: 520px;
          display: flex;
          flex-direction: column;
          position: relative;

          .tree-container {
            flex: 1;
            padding-top: 20px;
            overflow: hidden;
          }

          .coverPlatform {
            cursor: pointer;
            // position: absolute;
            // bottom: 20px;
            line-height: 30px;
            width: 100%;
            text-align: center;

            i {
              color: #B1BEFF;
            }
          }
        }

        .camera-platform {
          flex: 0 0 310px;
          display: flex;
          flex-direction: column;

          .camera-directive {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            .not-allowed {
              pointer-events: none;
            }

            .directive-container {
              // width: 208px;
              width: 164px;
              // height: 180px;
              height: 160px;
              background: #fff;
              border: 1px solid rgba(200, 200, 200, 1);
              border-radius: 20px;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              // padding: 26px 40px;
              padding: 20px 16px 16px;

              p {
                width: 100%;
                display: flex;
                justify-content: space-between;
              }

              i {
                // display: inline-block;
                box-sizing: border-box;
                width: 34px;
                height: 34px;
                font-size: 14px;
                color: $text_light;
                cursor: pointer;
                position: relative;
                border: 2px solid #A0A4BA;
                border-radius: 6px;
                display: flex;
                justify-content: center;
                align-items: center;

                &:before {
                  // display: inline-block;
                  // position: absolute;
                }

                &:hover {
                  color: $my-primary;
                  border-color: $my-primary;
                }

                &.is-disabled {
                  pointer-events: none;
                  opacity: 0.5;
                  cursor: not-allowed !important;
                }
              }

              .icon1:before {
                // left: 5px;
                // top: 8px;
                transform: rotateZ(-45deg);
              }

              // .icon2:before {
              //   // top: 8px;
              //   // left: 6px;
              // }
              .icon3:before {
                // top: 8px;
                // left: 10px;
                transform: rotateZ(45deg);
              }

              .icon4:before {
                // top: 8px;
                // left: 5px;
                transform: rotateZ(-90deg);
              }

              .icon5 {
                font-size: 20px;
                // &:before {
                //   // top: 3px;
                //   // left: 5px;
                // }
              }

              .icon6:before {
                // top: 8px;
                // left: 7px;
                transform: rotateZ(90deg);
              }

              .icon7:before {
                // top: 10px;
                // left: 5px;
                transform: rotateZ(-135deg);
              }

              .icon8:before {
                // top: 8px;
                // left: 6px;
                transform: rotateZ(180deg);
              }

              .icon9:before {
                // top: 10px;
                // left: 8px;
                transform: rotateZ(135deg);
              }
            }

            .float-layer {
              position: absolute;
              z-index: 10;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              cursor: not-allowed !important;
            }
          }
        }
      }

      .home-right {
        height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
        // overflow: hidden;

        .operator {
          .workorder-btn {
            color: var(--app_primary);
            font-size: 12px;
            display: inline-flex;
            margin-right: 40px;
            justify-content: space-between;

            .btn-item {
              width: 80px;
              line-height: 30px;
              border: 1px solid var(--app_primary);
              border-radius: 3px;
              text-align: center;
              margin-right: 12px;
              cursor: pointer;
            }
          }

          // background-color: #f99;
          // position: absolute;
          // top: 0;
          // right: 30px;
          i {
            font-style: normal;
            font-size: 20px;
            cursor: pointer;
            color: #bbb;

            &:not(:last-child) {
              margin-right: 20px;
            }

            &.active {
              color: $my-primary;
            }

            &:hover {
              color: $my-primary;
            }

            &.disabled {
              cursor: not-allowed;
            }

            &.disabled:hover {
              color: #dddddd;
            }
          }

          .iconfont12 {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
          }
        }

        .panel-content {
          flex: 1;
          padding: 10px 30px;
          // position: relative;
          overflow: hidden;

          .video-content {
            width: 100%;
            height: 100%;
            // overflow: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;

            .video-item {
              margin-bottom: 1px;
              display: inline-block;
              overflow: hidden;
            }

            &.video-item-25 .video-item {
              width: 19.9%;
              height: 19.8%;
            }

            &.video-item-24 .video-item {
              width: 16.62%;
              height: 24.867%;

              &:nth-child(1) {
                order: 1;
              }

              &:nth-child(2) {
                order: 2;
              }

              &:nth-child(3) {
                order: 7;
              }

              &:nth-child(4) {
                order: 8;
              }

              &:nth-child(5) {
                order: 3;
              }

              &:nth-child(6) {
                order: 4;
              }

              &:nth-child(7) {
                order: 9;
              }

              &:nth-child(8) {
                order: 10;
              }

              &:nth-child(9) {
                order: 5;
              }

              &:nth-child(10) {
                order: 6;
              }

              &:nth-child(11) {
                order: 11;
              }

              &:nth-child(12) {
                order: 12;
              }

              &:nth-child(13) {
                order: 13;
              }

              &:nth-child(14) {
                order: 14;
              }

              &:nth-child(15) {
                order: 19;
              }

              &:nth-child(16) {
                order: 20;
              }

              &:nth-child(17) {
                order: 15;
              }

              &:nth-child(18) {
                order: 16;
              }

              &:nth-child(19) {
                order: 21;
              }

              &:nth-child(20) {
                order: 22;
              }

              &:nth-child(21) {
                order: 17;
              }

              &:nth-child(22) {
                order: 18;
              }

              &:nth-child(23) {
                order: 23;
              }

              &:nth-child(24) {
                order: 24;
              }

            }

            &.video-item-16 .video-item {
              width: 24.9%;
              height: 24.8%;
            }

            &.video-item-12 .video-item {
              width: 24.9%;
              height: 33.1%;
            }

            &.video-item-12 .video-item12_2 {
              width: 16.55%;
              height: 49.8%;
            }

            &.video-item-9 .video-item {
              width: 33.25%;
              height: 33.1%;
            }

            &.video-item-4 .video-item {
              width: 49.97%;
              height: 49.85%;
            }

            &.video-item-1 .video-item {
              width: 100%;
              height: 100%;
            }
          }

          .device-list {
            position: absolute;
            top: 10px;
            right: 0;
            width: 345px;
            height: calc(100% - 20px);
            padding-right: 14px;

            .device-item {
              width: 100%;
              padding: 10px;
              border: 1px solid $border-light;
              margin-top: 20px;
              cursor: pointer;

              &:first-child {
                margin-top: 0;
              }

              &.active {
                border: 2px solid #FF941D;
              }

              .device-title {
                position: relative;
                margin-bottom: 6px;

                i {
                  position: absolute;
                  display: inline-block;
                  top: 6px;
                  left: 0;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;

                  &.device-offline {
                    background: $my-danger;
                  }

                  &.device-online {
                    background: $my-success;
                  }
                }

                span {
                  display: block;
                  font-size: 14px;
                  color: $text_dark;
                  padding-left: 15px;
                }
              }

              .device-img {
                display: inline-block;
                width: 100%;
              }
            }
          }
        }
      }
    }

    .left-home-part {
      width: 255px;
      overflow: hidden;
      margin-right: 12px;
    }

    .right-home-part {
      flex: 1;
      border-left: 1px solid #e8e8e8;
    }

    .el-dialog {
      .img-container {
        height: 60vh;
        min-height: 380px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        background-color: #f99;

        .img-item {
          background-color: aqua;

          &.w99 {
            width: 99%;
            height: 99%;
          }

          &.w49 {
            width: 49%;
            height: 49%;
          }

          &.w32 {
            width: 32%;
            height: 32%;
          }

          &.w24 {
            width: 24%;
            height: 24%;
          }

          &.w16 {
            width: 16%;
            height: 16%;
          }

          &.w19 {
            width: 19%;
            height: 19%;
          }
        }
      }

      .wk-container {
        height: 60vh;
        min-height: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .wk-container-item {
          flex: 1;
          height: 100%;
        }

        .wk-img {
          flex: 1;

          .el-image {
            width: 100%;
            height: 100%;
          }

          .edit-img {
            cursor: pointer;
            color: var(--app_primary);
            text-align: right;
            font-size: 12px;
            padding-right: 5px;
          }
        }

        .wk-info {
          flex: 1;
        }
      }
    }
  }
</style>
